import React from 'react';
import { useDispatch, useSelector } from 'react-redux';

export default function ChildNum() {
    console.log('re-render ChildNum');

    const dispatch = useDispatch();
    const num = useSelector((state: any) => state.num.num);

    return (
        <main className='container p-4 border'>
            <div className='p-4'>num is: {num}</div>
            <button
                className='p-2 border'
                type='button'
                onClick={() => {
                    dispatch({
                        type: 'ADD_NUM_ASYNC',
                    });
                }}
            >
                AddNum
            </button>
        </main>
    );
}
